<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="报灾标题" prop="title">
        <el-input
            style="width: 500px"
            placeholder="请输入标题"
            maxlength="20"
            v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="报灾类型" prop="type">
        <el-select v-loading="rolesLoading" v-model="form.type">
          <el-option v-for="item in hazardTypeList" :key="item.id" :value="item.name" :label="item.roleName" ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预警等级" prop="level">
        <el-input
            style="width: 500px"
            placeholder="请输入预警等级"
            maxlength="20"
            v-model="form.level"></el-input>
      </el-form-item>
      <el-form-item label="报灾位置" prop="area">
        <el-input
            style="width: 500px"
            placeholder="请输入位置"
            maxlength="20"
            v-model="form.area"></el-input>
      </el-form-item>
      <el-form-item label="发布时间" prop="time">
        <el-date-picker
            v-model="form.time"
            type="datetime"
            placeholder="选择日期"
            value-format="yyyy-MM-dd HH:mm:ss"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="文件" prop="coverImage">
        <el-button type="primary" @click="uploads.show=true" size="mini">选择文件</el-button>
        <div>{{form.pdf}}</div>
      </el-form-item>
      <el-form-item label="预计影响范围" prop="text">
        <Tinymce v-model="form.text"></Tinymce>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="handlerSubmit" v-has-permi="['admin:warn:save']">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        :visible.sync="uploads.show"
        title="上传文件"
        :append-to-body="true"
        destroy-on-close
        :close-on-click-modal="false"
        width="1000px">
      <UploadFile
          v-if="uploads.show"
          :multiple="uploads.multiple"
          @getFile="getFile"
          ref="uploads"
      />
    </el-dialog>
  </div>
</template>
<script>
import {detail, save, list1} from "@/api/warn";
import UploadFile from "@/components/File/UploadFile.vue";
import Tinymce from "@/components/Tinymce/index.vue";

export default {
  components: {Tinymce, UploadFile},
  props:{
    id:{
      default:null
    }
  },
  data(){
    return{
      form:{
        id:null,
        title:'',
        type:'',
        level:'',
        time:'',
        area:'',
        text:'',
        pdf:''
      },
      rolesLoading:false,
      hazardTypeList:[],
      rules:{
        title: [{ required: true, message: '请输入报灾标题', trigger: ['blur'] }],
        area: [{ required: true, message: '请输入报灾位置', trigger: ['blur'] }],
        type: [{ required: true, message: '请输入报灾类型', trigger: ['blur'] }],
        level: [{ required: true, message: '请输入预警等级', trigger: ['blur'] }],
        text: [{ required: true, message: '请输入内容', trigger: ['blur'] }],
        time: [{ required: true, message: '请选择时间', trigger: ['blur'] }],
      },
      roles:[],
      saveLoading:false,
      formLoading:false,
      uploads:{
        show:false,
        multiple:true,
      }
    }
  },
  mounted() {
    this.getHazardTypeList()
    if(this.id){
      this.getDetail();
    }
  },
  methods:{
    getFile(fileList){
      console.log(fileList);
      this.form.pdf = fileList[0]
      this.uploads.show = false
    },
    getHazardTypeList(){
      this.rolesLoading=true
      list1().then(res=>{
        this.hazardTypeList = res
        // getForm(res,this.form);
      }).finally(()=>{
        this.rolesLoading=false;
      })
    },
    getDetail(){
      this.formLoading=true
      detail(this.id).then(res=>{
        console.log(111111111111)
        console.log(res)
        this.form=res
        // getForm(res,this.form);
      }).finally(()=>{
        this.formLoading=false;
      })
    },
    handlerSubmit(){
      if(this.saveLoading||this.formLoading){
        return;
      }
      this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading=true;
        save(this.form).then(()=>{
          this.$message.success('保存成功');
          this.close();
        }).finally(()=>{
          this.saveLoading=false
        })
      })
    },
    close(){
      this.$emit('hideEditDialog')
    }
  }
}
</script>
